import React, { Component } from 'react'
import axios from 'axios'
import List from '../compenter/List'
import Page from '../compenter/Page'

export class Home extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         list:[],
         newarr:[],
         page:0,
         pages:[],
      }
    }
    componentDidMount(){
        const {page}=this.state
        axios.get('/list').then(res=>{
            let total=Math.ceil(res.data.length/10)
            this.setState({
                list:res.data,
                newarr:res.data.slice(page*10,(page+1)*10),
                pages:Array.from({length:total})
            })
        })
    }
    onchangepage(index){
        this.setState({
            page:index,
            newarr:this.state.list.slice(index*10,(index+1)*10)
        })
    }
    //上一页
    onshangyiye(){
        let {page}=this.state
        page--
        this.setState({
            page,
            newarr:this.state.list.slice(page*10,(page+1)*10)
        })
    }
    //下一页
    onxiayiye(){
        let {page}=this.state
        page++
        this.setState({
            page,
            newarr:this.state.list.slice(page*10,(page+1)*10)
        })
    }
  render() {
      const {newarr,page,pages}=this.state
    return (
      <div>
          <List newarr={newarr}></List>
          <Page 
          pages={pages}
          page={page}
          onchangepage={this.onchangepage.bind(this)}
          onshangyiye={this.onshangyiye.bind(this)}
          onxiayiye={this.onxiayiye.bind(this)}
          ></Page>
      </div>
    )
  }
}

export default Home